<template>
  <el-card shadow="never" style="max-height: 70px">
    <el-form inline>
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="username" />
      </el-form-item>
      <el-form-item class="fr">
        <el-button type="primary" :icon="Search" @click="search">
          搜索
        </el-button>
        <el-button :icon="Refresh" @click="refreshList">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card shadow="never" class="m-t-15">
    <div class="flex-between">
      <div>
        <el-button type="primary" :icon="Plus" @click="showDrawer">
          添加
        </el-button>
        <el-button
          type="danger"
          :icon="Delete"
          @click="batchRemove"
          :disabled="!selectRows.length"
        >
          批量删除
        </el-button>
      </div>

      <el-space>
        <el-icon :size="18" @click="getPageList">
          <Refresh />
        </el-icon>
        <el-icon :size="18">
          <Setting />
        </el-icon>
      </el-space>
    </div>
    <el-table
      :data="list"
      border
      class="m-t-15"
      row-key="id"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column prop="id" label="id" align="center"></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="用户昵称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="roleName"
        label="角色列表"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        show-overflow-tooltip
        sortable
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        show-overflow-tooltip
        sortable
      ></el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            link
            :icon="User"
            @click="showRoleDrawer(row)"
          >
            分配角色
          </el-button>
          <el-button type="primary" link :icon="Edit" @click="showDrawer(row)">
            编辑
          </el-button>
          <el-button type="primary" link :icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="m-t-15 flex-end"
    />
  </el-card>
  <Drawer ref="drawerRef" @success="getPageList"></Drawer>
  <RoleDrawer ref="roleDrawerRef" @success="getPageList"></RoleDrawer>
</template>

<script lang="ts" setup name="User">
import {
  Search,
  Refresh,
  Plus,
  Delete,
  User,
  Edit,
  Setting,
} from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import { getUserList } from '@/api'
import { AclUser } from '@/api/acl/types'
import Drawer from './components/Drawer.vue'
import RoleDrawer from './components/RoleDrawer.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { batchRemoveUsers } from '@/api/acl/user'

const currentPage = ref(1)
const pageSize = ref(5)
const username = ref('')
const list = ref<AclUser.UserList>([])
const total = ref(0)
const loading = ref(false)

//分页获取用户列表
const getPageList = async () => {
  loading.value = true
  const res = await getUserList(
    currentPage.value,
    pageSize.value,
    username.value,
  )
  list.value = res.data.records
  total.value = res.data.total
  loading.value = false
}

const search = () => {
  currentPage.value = 1
  pageSize.value = 5
  getPageList()
}

onMounted(getPageList)

watch([currentPage, pageSize], getPageList)

function refreshList() {
  currentPage.value = 1
  pageSize.value = 5
  username.value = ''
  getPageList()
}

const drawerRef = ref()
const showDrawer = (row?: AclUser.AddUserReq) => {
  drawerRef.value.open(row)
}
const roleDrawerRef = ref()
const showRoleDrawer = (row?: AclUser.RoleItem) => {
  roleDrawerRef.value.open(row)
}

//批量删除功能
const selectRows = ref<AclUser.UserList>([])

const handleSelectionChange = (rows: AclUser.UserList) => {
  selectRows.value = rows
}

const batchRemove = async () => {
  await ElMessageBox.confirm('您确认要删除选中的数据吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  await batchRemoveUsers(selectRows.value.map((user) => user.id))
  ElMessage.success('批量删除成功')
  getPageList()
}
</script>

<style scoped lang="scss">
.fr {
  float: right;
}
</style>
